/*
 * 获取画布
 */
var gameContainer = document.getElementById('gameContainer');
var ctx = gameContainer.getContext('2d');

/**
 * 画地图
 * 0: 黑色 1: 全砖块 2: 全墙块 3: 上半砖块 4: 上半墙块 5: 下半砖块 6: 下半墙块
 * 7: 左上砖块 8: 左下砖块 9: 右上砖块 10: 右下砖块
 * 11: 左上墙块 12: 左下墙块 13: 右上墙块 14: 右下墙块
 * 15: 左半砖块 16: 右半砖块 17: 左半墙块 18: 右半墙块
 * 19: 基地
 * 纵向：13列
 */
var map = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // 1
    [0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0], // 2
    [0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0], // 3
    [0, 1, 0, 1, 0, 1, 2, 1, 0, 1, 0, 1, 0], // 4
    [0, 1, 0, 1, 0, 3, 0, 3, 0, 1, 0, 1, 0], // 5
    [0, 3, 0, 3, 0, 5, 0, 5, 0, 3, 0, 3, 0], // 6
    [5, 0, 5, 5, 0, 3, 0, 3, 0, 5, 5, 0, 5], // 7
    [4, 0, 3, 3, 0, 5, 0, 5, 0, 3, 3, 0, 4], // 8
    [0, 5, 0, 5, 0, 1, 1, 1, 0, 5, 0, 5, 0], // 9
    [0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0], // 10
    [0, 1, 0, 1, 0, 3, 0, 3, 0, 1, 0, 1, 0], // 11
    [0, 1, 0, 1, 0, 10, 5, 8, 0, 1, 0, 1, 0], // 12
    [0, 0, 0, 0, 0, 16, 19, 15, 0, 0, 0, 0, 0], // 13
]

/*
 * 画背景地图
 */
var drawMap = function(images) {
    for (var i = 0; i < map.length; i++) {
        for (var j = 0; j < 13; j++) {
            drawTile(j * 48, i * 48, map[i][j], images);
        }
    }
}

/*
 * 画每块瓷砖
 * x: 左上角横坐标
 * y: 左上角纵坐标
 * type: 瓷砖类型
 */ 
var drawTile = function(x, y, type, images) {
    if (type === 1) {
        ctx.drawImage(images.brickImage, 0, 0, 64, 64, x, y, 48, 48);
    }
    else if (type === 2) {
        ctx.drawImage(images.wallImage, 0, 0, 64, 64, x, y, 48, 48);
    }
    else if (type === 3) {
        ctx.drawImage(images.brickImage, 0, 0, 64, 32, x, y, 48, 24);
    }
    else if (type === 4) {
        ctx.drawImage(images.wallImage, 0, 0, 64, 32, x, y, 48, 24);
    }
    else if (type === 5) {
        ctx.drawImage(images.brickImage, 0, 32, 64, 32, x, y + 24, 48, 24);
    }
    else if (type === 6) {
        ctx.drawImage(images.wallImage, 0, 32, 64, 32, x, y + 24, 48, 24);
    }
    // 左下砖块
    else if (type === 8) {
        ctx.drawImage(images.brickImage, 0, 32, 32, 32, x, y + 24, 24, 24);
    }
    // 右下砖块
    else if (type === 10) {
        ctx.drawImage(images.brickImage, 32, 32, 32, 32, x + 24, y + 24, 24, 24);
    }
    // 左半砖块
    else if (type === 15) {
        ctx.drawImage(images.brickImage, 0, 0, 32, 64, x, y, 24, 48);
    }
    // 右半砖块
    else if (type === 16) {
        ctx.drawImage(images.brickImage, 32, 0, 32, 64, x + 24, y, 24, 48);
    }
    // 基地
    else if (type === 19) {
        ctx.drawImage(images.baseImage, 0, 0, 48, 48, x, y, 48, 48);
    }
}

/*
 * 画坦克
 */
function drawTank(tank) {
    var tankFace = new Image();
    tankFace.src = sources[tank.face];
    if (tank.direction === 'up' || tank.direction === "down") {
        ctx.drawImage(tankFace, 0, 0, 60, 64, tank.x, tank.y, 45, 48);
    } 
    else {
        ctx.drawImage(tankFace, 0, 0, 64, 60, tank.x, tank.y, 48, 45);
    }
}

function move(tank, direction) {
    if (direction === 'up') {
        if (tank.direction === 'up') {
            tank.y -= 10;
        }
        tank.face = 'tankPlayer1UpImage';
    }
    else if (direction === 'left') {
        if (tank.direction === 'left') {
            tank.x -= 10;
        }
        tank.face = 'tankPlayer1LeftImage';
    }
    else if (direction === 'down') {
        if (tank.direction === 'down') {
            tank.y += 10;
        }
        tank.face = 'tankPlayer1DownImage';
    }
    else if (direction === 'right') {
        if (tank.direction === 'right') {
            tank.x += 10;
        }
        tank.face = 'tankPlayer1RightImage';
    }
    redrewCanvas();
}

/*
 * 清除画布
 */
function clearCanvas() {
    ctx.clearRect(0, 0, gameContainer.width, gameContainer.height);
}

/*
 * 重绘画布
 */
function redrewCanvas() {
    clearCanvas();
    // 画地图
    drawMap(staticImages);
    // 画坦克
    drawTank(tankPlayer1);
}
